<template>
  <el-date-picker
    :value="value"
    type="daterange"
    :editable="false"
    :clearable="false"
    format="yyyy-MM-dd HH:mm"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @input="handleInput"
  />
</template>

<script>
import {
  getThisWeekStartWithEnd,
  getTodayStartWithEnd,
  getYesterdayStartWithEnd,
  getThisMonthStartWithEnd,
} from '@/utils/date'

export default {
  name: 'DatePicker',
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pickerOptions: {
        firstDayOfWeek: 1,
        shortcuts: [
          {
            text: '今日',
            onClick(picker) {
              const time = getTodayStartWithEnd()
              picker.$emit('pick', time)
            },
          },
          {
            text: '昨日',
            onClick(picker) {
              const time = getYesterdayStartWithEnd()
              picker.$emit('pick', time)
            },
          },
          {
            text: '本周',
            onClick(picker) {
              const time = getThisWeekStartWithEnd()
              picker.$emit('pick', time)
            },
          },
          {
            text: '本月',
            onClick(picker) {
              const time = getThisMonthStartWithEnd()
              picker.$emit('pick', time)
            },
          },
        ],
      },
    }
  },
  methods: {
    handleInput(...e) {
      this.$emit('input', ...e)
    },
  },
}
</script>

<style scoped></style>
